<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="font/iconfont.css">
	<script src="js/rem.js"></script>
</head>
<body>	
	<div id="box">
		<head-top></head-top>
		<comment-list></comment-list>
		<content-input></content-input>		
	</div>
	<script src="js/vue.js"></script>
	<script>
		const bus = new Vue()
		const headTop = {
			template:`
			 <Header>提醒事项</Header>
			`
		}
         const commentList = {
			 template:`
			  <div class='commentList' v-if='comments.length'>
				 <ul>
				   	<commentItem  @change:active='getChange' @del:comment='getDel' :comment='comment' :index='index' :del='del'  v-for='(comment,index) in comments' :key='index'></commentItem>
				 </ul>	
			  </div>
			  <div v-else class='msg'>{{msg}}</div>
			 `,
			 data (){
				 return {
					 msg:'暂无记事',
					 comments:[] ,
				 }
			 },
			 methods:{
                getChange(index){
		
				this.comments[index].status = this.comments[index].status == 'active'? "" :"active"
				this.comments[index].del = this.comments[index].status == 'active' ? 1:0;
				},
				getDel(index){
					this.comments.splice(index,1)
				}
			 },
			 created(){
				 bus.$on('send:comment',(comment)=>{
					 this.comments.push(comment)
				 })
			 }
		 }
          const commentItem = {
			 template:`
			  <li :class="[{'active':comment.status==='active'}]">
				<p>{{comment.comment}}</p>
				<div class="option">		
					<i class="iconfont" @click='changeActive(index)'>&#xe68b;</i>
					<i class="iconfont" v-show='comment.del' @click='delComment'>&#xe624;</i>
				</div>
			  </li>  
			  `,
			  props:['comment','index','del'],
			  methods:{
				  changeActive(index){
					this.$emit('change:active',index)		
				  },
				  delComment(index){
					  this.$emit('del:comment',index)
				  }
			  }
		  }
		  const contentInput = {
			  template:`
			  <input type="text" v-model='comment.comment' @keyup.enter="sendComment" class="content">
			  `,
			  data (){
                return {
					comment:{
						comment:''
					}
				}
			  },
			  methods:{
				  sendComment(){
					  this.comment.status=''
					  this.comment.del=0
					  bus.$emit('send:comment',Object.assign({},this.comment))
				      this.comment.comment = ''
					}
			  }
		  } 
          Vue.component('commentList',commentList)
		  Vue.component('commentItem',commentItem)
		  Vue.component('contentInput',contentInput)
		  Vue.component('headTop',headTop)

		const box = new Vue({
			el:"#box",
		})

	</script>
</body>
</html>